<template>
  <div id="movie">
    <h3>电影名称：{{ movieName }}</h3>
    <h3>电影主角：{{ actor }}</h3>
    <button @click="unbindBus">解绑事件总线</button>
    <hr />
  </div>
</template>

<script>
export default {
  name: "Movie", //组件名
  data() {
    return {
      movieName: "天若有情",
      actor: "",
    };
  },
  mounted() {
    // 绑定事件总线
    this.$bus.$on("transmitName", (data) => {
      console.log("电影组件，收到了数据=", data);
      this.actor = data;
    });
  },
  methods: {
    unbindBus() {
      // 解绑事件总线
      this.$bus.$off("transmitName");
      console.log("解绑了事件 transmitName");
    },
  },
  //一般建议在 beforeDestroy 钩子中解绑组件用到的所有总线
  beforeDestroy() {
    // 解绑事件总线
    this.$bus.$off("transmitName");
    console.log("解绑了事件 transmitName");
  },
};
</script>

<style>
#movie {
  color: green;
}
</style>